<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/oksub.css">
    <script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
    <style>
        .layui-tree-btnGroup, .layui-tree-editInput{
            float: right!important;
        }
        .layui-form-switch{margin-top: 0;}
        #tree li::after{
            clear: both;
            content: '';
            display: table;
        }
    </style>
</head>
<body>
<div class="ok-body">
    <div>
        <table class="layui-table layui-form" id="tree" lay-size="sm" lay-filter="tableFilter"></table>
    </div>
</div>
<script src="/static/lib/layui/layui.js"></script>
<script src="/static/lib/layui/lay/lay-config.js"></script>
<script>
    layui.use(["okLayer","okUtils",'layer',"jquery",'treetable','table','layer'], function(){
        let okLayer = layui.okLayer
        ,okUtils = layui.okUtils
        ,layer = layui.layer
        ,$ = layui.jquery
        ,table = layui.table
        ,treetable = layui.treetable;
        okLoading.close();
        let	menuTable = treetable.render({
            id: 'tree',
            elem: '#tree',// 必须
            url: "{:addons_url('store://Category/getcategory')}",
            toolbar: "#toolbarTpl",
            treeColIndex: 2,
            treeSpid: 0,
            treeDefaultClose:true,
            treeIdName: 'id',
            treePidName: 'pid',
            cols: [[
                // {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', sort: true,align: 'center',},
                {field: 'pid',  title: 'PID'},
                {field: 'title', minWidth: 250, title: '菜单名'},
                {field: 'is_enable',  title: '显示'},
                {field: "is_home_recommended", title: "推荐", width: 100,},
                {title: "操作",  align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done: function (res, curr, count) {
                console.info(res, curr, count);

            }
        })
        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "add":
                    okLayer.open("新增分类", "{:addons_url('store://Category/categoryAdd')}", "90%", "90%", null, function () {
                        // location.reload();
                    })
                    break;
                case "ref":
                    location.reload();
                    break;
            }
        });
        table.on("tool(tableFilter)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "add":
                    layui.use(["okLayer"], function(){
                        let okLayer = layui.okLayer;
                        console.log(layer)
                        okLayer.open("新增分类", `{:addons_url('store://Category/categoryAdd')}?id=${data.id}`, "90%", "90%", null, function () {
                            // location.reload();
                        })
                    })
                    break;
                case "upc":
                    layui.use(["okLayer"], function(){
                        let okLayer = layui.okLayer;
                        okLayer.open("修改分类", `{:addons_url('store://Category/categoryUpc')}?id=${data.id}`, "90%", "90%", null, function () {
                            // location.reload();
                        })
                    })
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        });
        function del(id){
            layer.confirm('确认删除？(将会删除其子菜单，以及该菜单的商品绑定信息！建议删除前请先备份数据库)', {
                btn: ['确定','取消'] //按钮
            }, function(){
                okUtils.ajax("{:addons_url('store://Category/delete')}", "post", {id}, true).done(function (response) {
                    if (response.status === 200) {
                        okLayer.greenTickMsg(response.msg, function () {
                            location.reload();
                        })
                    }
                }).fail(function (error) {
                    console.log(error)
                });
            }, function(){

            });

        }
    });
</script>

<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增分类</button>
        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="ref">刷新列表</button>
    </div>
</script>

<script type="text/html" id="operationTpl">
    <input type="button"  lay-event="add" name="add" class="layui-btn layui-btn-normal layui-btn-sm"  value="新增">
    <input type="button"  lay-event="upc" name="upc" class="layui-btn layui-btn-sm"   value="修改">
    <input type="button"  lay-event="del" name="del" class="layui-btn layui-btn-danger layui-btn-sm"  value="删除">
</script>
</body>
</html>